<template>
  <div class="app-container">
<!--基本合同信息-->
    <div class="basicInfo">
      <h2 class="title">合同基本信息</h2>
      <el-form ref="basicInfoFrom" label-width="80px" :model="basicInfoFrom" :rules="pactDataRules" :inline="true" label-position="top">
        <el-form-item label="合同编号" prop="roleName" class="widthPadding">
          <el-input v-model="basicInfoFrom.contractId" size="medium" disabled />
        </el-form-item>
        <el-form-item label="合同名称" prop="roleName" class="widthPadding">
          <el-input v-model="basicInfoFrom.contractName" size="medium" disabled />
        </el-form-item>
        <el-form-item label="账套编码" prop="roleKey" class="widthPadding">
          <el-input v-model="basicInfoFrom.financialCode" size="medium"/>
        </el-form-item>
        <el-form-item label="公司名称" prop="roleKey" class="widthPadding">
          <el-input v-model="basicInfoFrom.companyName" size="medium" disabled/>
        </el-form-item>
        <el-form-item label="门店编码" prop="roleKey" class="widthPadding">
          <el-input v-model="basicInfoFrom.storeId" size="medium"/>
        </el-form-item>
        <el-form-item label="门店名称" prop="roleKey" class="widthPadding">
          <el-input v-model="basicInfoFrom.storeName" size="medium"/>
        </el-form-item>
        <el-form-item label="出租人名称" prop="roleKey" label-width="100px" class="widthPadding">
          <el-input v-model="basicInfoFrom.lessorName" size="medium" placeholder="请输入出租人"/>
        </el-form-item>
        <el-form-item label="门店开业日期" label-width="110px" class="widthPadding" required>
          <div class="block">
            <el-date-picker
              v-model="basicInfoFrom.storeOpeningTime"
              type="date"
              size="medium"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="资产所在地" prop="roleKey" label-width="100px" class="widthPadding">
          <el-input v-model="basicInfoFrom.assetsLocation" size="medium" placeholder="请输入资产所在地"/>
        </el-form-item>
        <el-form-item label="合同是否可撤销" label-width="120px" class="widthPadding">
          <el-select v-model="basicInfoFrom.iscontractRevoke" placeholder="请选择是否撤销">
            <el-option
              size="small"
              v-for="item in pullDown.isRepeal"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建筑面积(㎡)" label-width="110px" class="widthPadding">
          <el-input v-model="basicInfoFrom.floorage" size="medium" placeholder="请输入建筑面积"/>
        </el-form-item>
        <el-form-item label="使用面积(㎡)" prop="roleKey" label-width="110px" class="widthPadding">
          <el-input v-model="basicInfoFrom.area" size="medium" placeholder="请输入使用面积"/>
        </el-form-item>
        <el-form-item label="资产类别" prop="roleKey" class="widthPadding">
          <el-select v-model="basicInfoFrom.assetsType" placeholder="请选择类别">
            <el-option
              v-for="item in pullDown.property"
              :key="item.id"
              :label="item.value"
              size="small"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="租赁资产用途" prop="roleKey" label-width="110px" class="widthPadding">
          <el-select v-model="basicInfoFrom.leasePurpose" placeholder="请选择用途">
            <el-option
              size="small"
              v-for="item in pullDown.purpose"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同开始日期" label-width="110px" class="widthPadding" required>
          <div class="block">
            <el-date-picker
              v-model="basicInfoFrom.contractStartTime"
              type="date"
              size="medium"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="合同结束日期" label-width="110px" class="widthPadding" required>
          <div class="block">
            <el-date-picker
              v-model="basicInfoFrom.contractEndTime"
              type="date"
              size="medium"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="合同期限" label-width="110px" class="widthPadding">
          <el-input v-model="basicInfoFrom.contractPeriod" size="medium" disabled/>
        </el-form-item>
        <el-form-item label="是否有免租期" label-width="120px" class="widthPadding" required>
          <el-radio v-model="isrentFree" :label="1" disabled>是</el-radio>
          <el-radio v-model="isrentFree" :label="2" disabled>否</el-radio>
        </el-form-item>
        <el-form-item label="免租开始日期" label-width="110px" class="widthPadding" required>
          <div class="block">
            <el-date-picker
              v-model="basicInfoFrom.freeRentTimeStart"
              type="date"
              size="medium"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="免租结束日期" label-width="110px" class="widthPadding" required>
          <div class="block">
            <el-date-picker
              v-model="basicInfoFrom.freeRentTimeEnd"
              type="date"
              size="medium"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="免租期限" label-width="110px" class="widthPadding">
          <el-input v-model="basicInfoFrom.freeRentTerm" size="medium" placeholder="请输入使用面积" disabled/>
        </el-form-item>
        <el-form-item label="合同总金额(不含税)" prop="roleKey" label-width="110px" class="widthPadding">
          <el-input v-model="basicInfoFrom.contractMoneyNum" size="medium" placeholder="请输入合同总金额"/>
        </el-form-item>
        <el-form-item label="是否有押金" prop="roleKey" label-width="120px" class="widthPadding">
          <el-radio v-model="basicInfoFrom.cdcDeposit.isDeposit" :label="1">是</el-radio>
          <el-radio v-model="basicInfoFrom.cdcDeposit.isDeposit" :label="2">否</el-radio>
          <el-input v-model="basicInfoFrom.cdcDeposit.depositMoney" prop="roleKey" size="medium" placeholder="请输入押金金额" v-show="basicInfoFrom.cdcDeposit.isDeposit===1"/>
        </el-form-item>
        <el-form-item label="是否有定金" prop="roleKey" label-width="120px" class="widthPadding">
          <el-radio v-model="basicInfoFrom.cdcDeposit.isHandsel" :label="1">是</el-radio>
          <el-radio v-model="basicInfoFrom.cdcDeposit.isHandsel" :label="2">否</el-radio>
          <el-input v-model="basicInfoFrom.cdcDeposit.handselMoney" size="medium" prop="roleKey" placeholder="请输入定金金额" v-show="basicInfoFrom.cdcDeposit.isHandsel===1"/>
        </el-form-item>
        <el-form-item label="是否提供增值税专用发票" label-width="200px" class="widthPadding">
          <el-select v-model="basicInfoFrom.isVatinvoice" placeholder="请选择类别">
            <el-option
              v-for="item in pullDown.isAddedValue"
              :key="item.id"
              :label="item.value"
              size="small"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票税率" prop="roleKey" label-width="120px" class="widthPadding">
          <el-input v-model="basicInfoFrom.taxRate" size="medium" placeholder="请输入发票税率"/>
        </el-form-item>
        <el-form-item label="发票税额" prop="roleKey" label-width="120px" class="widthPadding">
          <el-input v-model="basicInfoFrom.taxAmount" size="medium" placeholder="请输入发票税额"/>
        </el-form-item>
        <el-form-item label="租金付款方式" label-width="120px" class="widthPadding">
          <el-select v-model="basicInfoFrom.cdcDeposit.depositPaymentMode" placeholder="请选择租金付款方式">
            <el-option
              size="small"
              v-for="item in pullDown.rentPayment"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="约定付款日" label-width="110px" class="widthPadding" required>
          <div class="block">
            <el-date-picker
              v-model="basicInfoFrom.cdcDeposit.followPaymentTime"
              type="date"
              size="medium"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="租金支付方式" prop="roleKey" label-width="120px" class="widthPadding">
          <el-select v-model="basicInfoFrom.cdcDeposit.rentPayment" placeholder="请选择类别">
            <el-option
              v-for="item in pullDown.methodRentPayment"
              :key="item.id"
              :label="item.value"
              size="small"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
<!--收款人信息-->
    <div class="collectionInfo">
      <h2 class="title">收款人信息</h2>
      <el-table
        border
        style="width: 100%"
        :data="collectionInfoForm">
        <el-table-column
          prop="paymentName"
          label="收款人"
          width="180">
        </el-table-column>
        <el-table-column
          prop="companyBankAccount"
          label="收款账号"
          width="180" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.companyBankAccount" ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyBankName"
          label="开户银行"
          width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.companyBankName" ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="landadyBankDeposit"
          label="支行"
          width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.landadyBankDeposit" ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="payTel"
          label="联系电话">
          <template slot-scope="scope">
            <el-input v-model="scope.row.payTel" ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="collectionMix"
          label="收款占比(%)"
          width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.collectionMix" ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--按钮组-->
    <div class="pactBtn">
      <el-button type="primary" @click="subPactInfo">提交合同信息</el-button>
      <el-button type="primary" @click="subPactDraft">保存合同信息草稿</el-button>
      <el-button type="primary" @click="subReceipt">提交收款信息</el-button>
    </div>
  </div>
</template>

<script>
import myx from '@/store/myx'
import { getVariation, queryFinanceUser, earlyChangPact, updateFinanceUser } from '@/api/contract'
export default {
  created() {
    // 初始化数据
    if (myx.state.contractId) {
      getVariation(myx.state.contractId, myx.state.contractType).then(res => {
        this.basicInfoFrom = res.data[0]
      })
      queryFinanceUser().then(res => {
        this.collectionInfoForm = res.data
      })
    }
  },
  data() {
    return {
      // 默认数据
      basicInfoFrom: {
        contractState: 2,
        contractId: '',
        contractName: '',
        financialCode: '',
        companyName: '',
        iscontractRevoke: '',
        storeId: '',
        storeName: '',
        lessorName: '',
        assetsLocation: '',
        floorage: 0,
        area: 0,
        assetsType: '',
        leasePurpose: '',
        contractStartTime: '',
        contractEndTime: '',
        freeRentTerm: 0,
        freeRentTimeStart: '',
        freeRentTimeEnd: '',
        contractMoneyNum: '',
        isVatinvoice: 2,
        taxRate: 0,
        taxAmount: 0,
        // 定金对象
        cdcDeposit: {
          isHandsel: 2,
          handselMoney: 0,
          depositPaymentMode: '',
          followPaymentTime: '',
          rentPayment: 1,
          isDeposit: 1
        }
      },
      // 下拉选择数据
      pullDown: {
        // 资产类
        property: [{
          id: 1,
          value: '房屋'
        }, {
          id: 2,
          value: '设备'
        }],
        // 是否撤销合同
        isRepeal: [{
          id: 1,
          value: '是'
        }, {
          id: 2,
          value: '否'
        }],
        // 资产用途
        purpose: [{
          id: 1,
          value: '门店经营'
        }, {
          id: 2,
          value: '办公'
        }, {
          id: 3,
          value: '职工福利'
        }],
        rentPayment: [{
          id: 1,
          value: '年付'
        }, {
          id: 2,
          value: '半年付'
        }, {
          id: 3,
          value: '季付'
        }, {
          id: 4,
          value: '月付'
        }, {
          id: 5,
          value: '四月付'
        }, {
          id: 6,
          value: '两月付'
        }],
        // 是否提供增值税专用发票
        isAddedValue: [{
          id: 1,
          value: '是'
        }, {
          id: 2,
          value: '否'
        }],
        // 租金支付方式
        methodRentPayment: [{
          id: 1,
          value: '先付后使用'
        }, {
          id: 2,
          value: '先付后使用'
        }]
      },
      // 验证规则
      pactDataRules: {
        roleKey: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      // 收款人信息
      collectionInfoForm: []
    }
  },
  computed: {
    // 是否有免租期
    isrentFree() {
      return this.basicInfoFrom.freeRentTerm && this.basicInfoFrom.freeRentTerm > 0 ? 1 : 2
    }
  },
  methods: {
    // 提交信息方法
    subInfo() {
      delete this.basicInfoFrom.paymentPlan
      delete this.basicInfoFrom.cdcDeposit
      earlyChangPact(this.basicInfoFrom).then(() => {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
      })
    },
    // 提交合同信息
    subPactInfo() {
      this.basicInfoFrom.contractState = 3
      this.subInfo()
    },
    // 提交草稿
    subPactDraft() {
      this.basicInfoFrom.contractState = 1
      this.subInfo()
    },
    // 提交收款人信息
    subReceipt() {
      console.log(this.collectionInfoForm)
      updateFinanceUser(this.collectionInfoForm).then(() => {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  border-left: 6px solid #409EFF;
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
}
form{
}
form>.el-form-item{
  width:35%;
  margin-left: 120px;
}
.el-input--medium{
  width: 50% !important;
}
.collectionInfo{
  width: 80%;
  margin-top: 40px;
}
.collectionInfo>.el-table{
  margin-left: 50px;
}
.pactBtn{
  margin: 40px 0px 20px 60%;
}
</style>
